<template>
  <div class="attend-left">
    <div class="attend-l1">
      <category-title title="设备总览" title-sub="Equipment Overview"/>
      <device-info :datas="l1DeviceInfoT"/>
      <device-info :datas="l1DeviceInfoB"/>
    </div>
    <div class="attend-l2">
      <category-title title="设备在线率" title-sub="Equipment utilization rate"/>
      <div class="progress-box">
        <div v-for="item in L2data" :key="item.name" class="progress-left flex-center">
          <a-progress
              :percent="item.value"
              :size="100"
              status="normal"
              :stroke-color="{
        '0%': '#355d62',
        '100%': '#B7FFFF',
      }"
              :strokeWidth="10"
              type="circle"
          />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="attend-l3">
      <category-title title="设备告警" title-sub="equipment alarm"/>
      <div class="l3-list-box">
        <L3List :datas="l3data" @next-page="l3ScrollEvent"/>
      </div>
    </div>
  </div>
  <div class="attend-middle">
<!--    <div class="imgList">-->
<!--      <img src="~@/assets/base-image-camera.png" alt="" class="sxt">-->
<!--    </div>-->
  </div>
  <div class="security-right">
    <div class="security-r1">
      <category-title filter title="边界告警" title-sub="Boundary alarm"/>
      <div class="table-box">
<!--        <simple-table :columns="r1ColumnData" :datas="r1data" @next-page="r1ScrollEvent"/>-->
        <Bjgj/>

      </div>
    </div>
    <div class="security-r2">
      <category-title filter title="边界告警画面" title-sub="Boundary alarm screen"/>
      <div ref="cameraBox" class="image-info-box" @scroll="r2ScrollEvent">
        <image-info-list :datas="r2ImageList" @preview="onPreviewImage"/>
      </div>
    </div>
  </div>
  <preview v-if="showPreview" :url="previewUrl" @close="showPreview = false"/>

</template>

<script setup>
import {l1DeviceInfoB, l1DeviceInfoT, r1ColumnData, R1Data} from "./data.js";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import DeviceInfo from "@/components/customs/device-info/index.vue";
import SimpleTable from "@/components/customs/simple-table/index.vue";
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {BjgjApi, JkApi, SblxzzApi, SbzlApi} from "@/common/customs/overview";
import L3List from "./component/l3-list/index.vue";
import Preview from "@/components/customs/preview/index.vue";
import ImageInfoList from "@/components/customs/image-info-list/index.vue";
import Bjgj from "@/components/customs/Bjgj/index.vue";
import {nextPageFun, scrollNextEvent} from "@/common/tool";
import {inject} from "@vue/runtime-core";
const onPlayCamera = inject("playCamera");

const showPreview = ref(false);
const time = ref();
const previewUrl = ref("");
const r2ImageList = ref([]);
const r2Params = reactive({
  page: {
    page_size: 30,
    page: 1,
    type:1
  }
});
const L3Config = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 20
  }
});
const r1Config = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 20
  }
});
const r2Config = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 20
  }
});
const L2data = reactive({
  jk: {
    value: 0,
    name: "监控设备"
  },
  mj: {
    value: 0,
    name: "门禁设备"
  },
});
const l3data = ref([])
const r1data = ref([])
const getL1 = async () => {
  const api = new SbzlApi();
  await api.send();
  const {data} = await api.getDatas();
  l1DeviceInfoT.stat.value = data.jkzs || 0;
  l1DeviceInfoT.wrap.forEach(item => {
    if (item.key === "jkgb") {
      item.value = data.jkzs - data.jkzx || 0;
    } else {
      item.value = data[item.key] || 0;
    }
  });
  l1DeviceInfoB.stat.value = data.mj || 0;
  l1DeviceInfoB.wrap.forEach(item => {
    if (item.key === "mjgb") {
      item.value = data.mj - data.mjzx || 0;
    } else {
      item.value = data[item.key] || 0;
    }
  });
  L2data.jk.value = data.jklyl;
  L2data.mj.value = data.mjlyl;
};
const getL3 = async (next = false) => {
  const api = new SblxzzApi();
  await nextPageFun(api, l3data, next, L3Config);
  // api.params({
  //   page:1,
  //   page_size: 50
  // })
  // await api.send()
  // const {data} = await api.getDatas()
  // l3data.value = data.data
};
const getR1 =async (next = false) => {
  const api = new BjgjApi();
  await nextPageFun(api, r1data, next, r1Config);
};
const getR2 = async (next = false) => {
  const api = new JkApi();
  const dataBase = (data) =>{
    data.data = data.data.map((item, index) => {
      return {
        ...item,
        title: `画面${(index + 1) + r2Config.params.page * 30 - 30}`,
        info1: item.cameraName,
        // date: item.,
        image: item.ztimg || "https://img0.baidu.com/it/u=3945126777,2549444928&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
      };
    });
    return data
  }
  await nextPageFun(api, r2ImageList, next, r2Config,dataBase);

  // api.params(r2Params.page);
  // await api.send();
  // const {data} = await api.getDatas();
  // let arr = [];
  // arr = data.data.map((item, index) => {
  //   return {
  //     ...item,
  //     title: `画面${(index + 1) + r2Params.page.page * 30 - 30}`,
  //     info1: item.cameraName,
  //     // date: item.,
  //     image: item.ztimg || "https://img0.baidu.com/it/u=3945126777,2549444928&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
  //   };
  // });
  // r2ImageList.value = arr;
};
const onPreviewImage = (item) => {
  onPlayCamera(item.cameraIndexCode)
};
const l3ScrollEvent = (event) => {
  scrollNextEvent(event, L3Config,() => getL3(true));
};
const r2ScrollEvent = (event) => {
  scrollNextEvent(event, r2Config,() => getR2(true));
};
const sx = () => {
  if (time.value){
    clearInterval(time.value)
  }
  time.value = setInterval(()=>{
    getL1();
    getR2();
    getL3();
    // getR1();
  },60000)
}
onMounted(() => {
  getL1();
  getR2();
  getL3();
  // getR1();
});
onBeforeUnmount(()=>{
  if (time.value){
    clearInterval(time.value)
  }
})
</script>

<style lang="less" scoped>
@import "./index2.less";
@import "./index.less";

</style>
